<template>
  <div>
    <el-button type="danger" @click="createNavite">支付</el-button>
    <el-dialog
        title="收银台"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <div style="text-align: center">
        <p>微信支付 {{payResult.total_fee}}元</p>
        <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
          <vue-qr
              :text="payResult.code_url"
              :margin="0"
              colorDark="green"
              :logoSrc="require('@/assets/1.jpg')"
              colorLight="#fff"
              :size="200">

          </vue-qr>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="font-size: 13px">
        提示:<br>
        支付成功前请勿手动关闭页面<br>
        二维码两小时内有效,请及时扫码支付<br>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import axios from "axios";
export default {
  name: "wx",
  data(){
    return {
      //得到响应的结果
      payResult:{
        code_url:"", //二维码的地址
        out_trade_no:"5", //订单号
        total_fee:0, //支付的金额
        course_id:"", //课程id
        logoSrc:"assets/1.jpg"//微信二维码中间小logo
      },
      timer1:'',
      dialogVisible:false, //弹出框
    }
  },
  methods:{
    createNavite(){
      var that=this;
      axios.get("/order/pay/createNatice/"+this.payResult.out_trade_no).then(function(resp){
        if(resp.data.code===2000){
          that.dialogVisible=true
          that.payResult=resp.data.result;
        }else {
          that.$message.error("二维码生成失败,请查询订单是否已经支付。");
        }
        // console.log(that.payResult)
      })
    },

    queryPayStatus(orderNo){
      var that=this;
      axios.get("/order/pay/getPayStatus/"+orderNo).then(r=>{
        if(r.data.code===2000){
          //如果支付成功，清除定时器
          clearInterval(that.timer1)
          that.timer1=null;
          that.$message({
            type: 'success',
            message: '支付成功!'
          })
          that.dialogVisible=false;
          //跳转到课程详情页面观看视频
          //that.$router.push({path: '/course/' + that.payResult.course_id})
        }
      })
    }
  },
  //created:
  mounted(){
    // 设置一个定时任务，每隔3秒调用一次
    this.timer1 = setInterval(() => {
      this.queryPayStatus(this.payResult.out_trade_no)
    }, 3000);
  },
  components: {
    vueQr
  }
}
</script>

<style scoped>

.el-dialog__header{
  background-color: #f3f3f3;
  margin-top: -10px !important;
}
</style>